<template>
    <div>
        <nav-header title="修改密码"></nav-header>

        <div class="top">
            <div class="password">
                <span class="inp inp01">
                    <input :type="type" name="" v-model="password1" id="password1" placeholder="请输入你的密码" />
                    <div class="eyes" @click="flag = !flag">
                        <van-icon :name="elIcon" size="25px" />
                    </div>
                </span>
            </div>
            <!-- plan01 -->
            <div class="password">
                <span class="inp inp01">
                    <input :type="passwordType" name="" v-model="password2" id="password2" placeholder="请确认你的密码" />
                    <div class="eyes" @click="switchPasswordType">
                        <van-icon name="eye" size="25px" v-if="passwordType === 'text'" />
                        <van-icon name="closed-eye" size="25px" v-if="passwordType === 'password'" />
                    </div>
                </span>
            </div>
            <div class="bt">
                <div class="login" @click="loGin()">确认修改</div>
            </div>
        </div>
        <!-- <div class="login">
      去<router-link class="p" to="/reg">登录</router-link>
    </div> -->
    </div>
</template>


<script>
import NavHeader from "../../components/Nav-Header.vue";

export default {
    name: "App03PasXl",
    components: { NavHeader },
    data() {
        return {
            flag: false,
            passwordType: "password",
            oldPassword:'',
            password1:'',
            password2:''
        };
    },
    computed: {
        type() {
            return this.flag ? "text" : "password";
        },
        elIcon() {
            return this.flag ? "eye" : "closed-eye";
        },
    },
    mounted() { 
        // localStorage.getItem('xl-userInfo',JSON.stringify(userInfo))
        let user =  JSON.parse(localStorage.getItem('xl-userInfo'))
        this.oldPassword = user.password
        console.log(this.oldPassword)
    },

    methods: {
        switchPasswordType() {
            this.passwordType =
                this.passwordType === "password" ? "text" : "password";
        },
        loGin(){
            let uid =  localStorage.getItem('xl-uid')
            this.$axios.post('/user/updatePwd',{
                oldPassword:this.password1,
                newPassword:this.password2,
                uid:uid
            }).then(res=>{
                console.log(res)
                if(res.code ==0){
                    this.$toast(res.message)
                    setTimeout(()=>{
                        this.$toast('请重新登录！')
                        this.$router.push('/login')
                    },2000)
                }else{
                    this.$toast(res.message)
                }
            }).catch(err=>{
                console.log(err)
            })
        }
    },
};
</script>

<style lang="scss" scoped>
.top {
    width: 95%;
    margin: auto;

    .password {
        width: 95%;
        height: 50px;
        border-bottom: 1px solid rgb(204, 204, 204);
        padding-bottom: 10px;
        // text-align: center;
        position: relative;
        margin: auto;
        display: flex;
        justify-content: space-between;

        input {
            height: 50px;
            font-size: 16px;
            line-height: 50px;
            // margin-left: 15px;
        }

        p {
            color: coral;
            font-size: 15px;
            line-height: 50px;
            margin-right: 10px;
        }

        .inp01 {
            display: flex;

            .eyes {
                position: absolute;
                right: 10px;
                top: 20px;
            }
        }
    }

    .bt {
        width: 100%;
        text-align: center;
        margin-top: 300px;

        .login {
            width: 80%;
            height: 40px;
            background-color: #07c160;
            color: white;
            margin: auto;
            line-height: 40px;
            border-radius: 30px;
        }

        .reg {
            width: 80%;
            height: 40px;
            // background-color: cornflowerblue;
            color: #07c160;
            margin: auto;
            line-height: 40px;
            border-radius: 30px;
            margin-top: 10px;
        }
    }
}

.login {
    width: 100%;
    height: 40px;
    font-size: 20px;
    text-align: center;
    line-height: 40px;

    .p {
        color: #07c160;
    }
}
</style>